{% extends "admin/layout.html" %}
{% block head_link %}
    <link href="{{ static_url('bootstrap-table-css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ static_url('air-datepicker-css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ static_url('admin/_common.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ static_url('admin/user/list.css') }}" rel="stylesheet" type="text/css" />
    <style type="text/css">
        #toolbar {
            padding-left: 0.7em;
        }
    </style>
{% endblock %}
{% block body_content %}
<div class="row">
    <div id="toolbar">
        <div class="form-inline" role="form">
            <input class="btn btn-default" type="button" value="禁用" id="btn-disable" disabled="disabled" />
            <input class="btn btn-default" type="button" value="删除" id="btn-delete" disabled="disabled" />
            <input class="btn btn-default" type="button" value="添加" id="btn-add" />
        </div>
    </div>
    <div class="table-responsive">
        <table id="tb-users" width="100%" class="table table-striped table-hover table-condensed"></table>
    </div>
</div>
{% endblock %}
{% block body_src %}
    {{ super() }}
    <script src="{{ static_url('bootstrap-table-js') }}" type="text/javascript"></script>
    <script src="{{ static_url('bootstrap-table-i18n-chinese') }}" type="text/javascript"></script>
    <script type="text/javascript" src="{{ static_url('air-datepicker-js') }}"></script>
    <script type="text/javascript" src="{{ static_url('air-datepicker-i18n-chinese') }}"></script>
    <script src="{{ static_url('admin/_common.js') }}" type="text/javascript"></script>
    <script src="{{ static_url('admin/user/list.js') }}" type="text/javascript"></script>
{% endblock %}
{% block body_js %}
    {{ super() }}
    <script type="text/javascript">
        var DT_ajax = "{{ url_for('admin.user_list_ajax') }}";
        var USER_SAVE_AJAX = "{{ url_for('admin.user_save_ajax') }}";
        var USER_DELETE_DISABLE_URL = "{{ url_for('admin.user_delete_or_disable') }}";

        $(document).ready(function() {
            bind_click4btns();
            var $tb_obj = $('#tb-users');
            $tb_obj.bootstrapTable({
                locales:'zh-CN',
                toolbar: '#toolbar', //工具按钮用哪个容器
                striped: true, //是否显示行间隔色
                cache: true, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（）
                pagination: true, //是否显示分页（）
                sortable: true, //是否启用排序
                sortOrder: "asc", //排序方式
                queryParams: function(pa) {
                    console.log(pa)
                    console.log(this);
                    console.log(arguments);
                    var params = arguments[0];
                    if(!params) {
                        params = {};
                    }
                    return params;
                },
                onCheck: function() {
                    console.log(arguments, 'onCheck');
                    change_enable($tb_obj);
                },
                onUncheck: function() {
                    console.log(arguments, 'onUncheck');
                    change_enable($tb_obj);
                },
                onCheckAll: function() {
                    console.log(arguments, 'onCheckAll');
                    change_enable($tb_obj);
                },
                onUncheckAll: function() {
                    console.log(arguments, 'onUncheckAll');
                    change_enable($tb_obj);
                },
                onCheckSome: function() {
                    console.log(arguments, 'onCheckSome');
                    change_enable($tb_obj);
                },
                onUncheckSome: function() {
                    console.log(arguments, 'onUncheckSome');
                    change_enable($tb_obj);
                },
                onPostBody: function() {
                    console.log(arguments, 'onPostBody');
                    setTimeout(function() {
                        change_enable($tb_obj);
                    }, 50);
                },
                // queryParamsType: "limit",
                sidePagination: "server", //分页方式：client客户端分页，server服务端分页（）
                pageNumber: 1, //初始化加载第一页，默认第一页
                pageSize: 50, //每页的记录行数
                pageList: [10, 25, 50, 100, 500, 1000], //可供选择的每页的行数
                search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                strictSearch: true,
                showColumns: true, //是否显示所有的列
                showRefresh: true, //是否显示刷新按钮
                minimumCountColumns: 1, //最少允许的列数
                clickToSelect: true, //是否启用点击选中行
                // height: 700, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "id", //每一行的唯一标识，一般为主键列
                showToggle: true, //是否显示详细视图和列表视图的切换按钮
                cardView: false, //是否显示详细视图
                detailView: false, //是否显示父子表
                showLoading:true,
                columns: [
                    {
                        title: 'check',
                        checkbox: true,
                        formatter: function(value, row, index) {
                            /*
                            if(index === 2) {
                                return {
                                    disabled: true
                                };
                            }
                            if(index === 5) {
                                return {
                                    disabled: true,
                                    checked: true
                                }
                            }
                            return value;
                            */
                            return value;
                        }
                    }, {
                        field: 'id',
                        title: '#ID'
                    }, {
                        field: 'name',
                        title: '姓名'
                    }, {
                        field: 'email',
                        title: '邮箱'
                    }, {
                        field: 'is_admin',
                        title: '管理员',
                        formatter: function(value, row, index) {
                            return value == 1 ? '是' : '否';
                        }
                    }, {
                        field: 'disable',
                        title: '禁用',
                        formatter: function(value, row, index) {
                            return value == 1 ? '是' : '否';
                        }
                    }, {
                        title: '详情',
                        formatter: function(value, row, index) {
                            console.log(row);
                            return ['<a href="javascript:user_detail(', row.id, ');">查看</a>'].join('');
                        }
                    }
                ],
                ajax: function(params) {
                    var _data = {};
                    _data['offset'] = params.data['offset'];
                    _data['limit'] = params.data['limit'];
                    if(params.data['sort'] && params.data['order']) {
                        _data['sort'] = params.data['sort'];
                        _data['order'] = params.data['order'];
                    }
                    if(params.data['search']) {
                        _data['search'] = params.data['search'];
                    }
                    $.ajax({
                        url: DT_ajax,
                        type: 'POST',
                        data: _data,
                        dataType: 'json'
                    }).done(function(res) {
                        console.log(res)
                        console.log(params)
                        var _data = {
                            rows: res.rows,
                            total: res.total
                        };
                        params.success(_data);
                        // that.trigger('load-success', _data);
                    }).fail(function(e) {
                        console.error(e);
                        params.error(e);
                    });
                }
            });
        });
    </script>
{% endblock %}